<template>
  <div>
    <el-container class="questionlist">
      <el-main>
        <ul class="list-group list-group-flush">
          <!-- class="text-dark" -->
          <router-link v-for="(v, key) in list" :key="key" :to="{
            name: routername,
            params: { index: key },
          }" v-slot="{ navigate, isActive }" custom>
            <li class="list-group-item d-flex justify-content-between align-items-center" @click="navigate"
              :class="isActive ? 'active1' : ''">
              <span>{{ key + 1 }} {{ v.name }}</span>
              <span class="badge badge-pill">
                <el-tag effect="plain" v-if="v.userquestion?.df" v-text="v.userquestion?.df" size="default"></el-tag>
                <el-tag effect="plain" class="ml-2" v-text="v.type" size="default"></el-tag>
              </span>
            </li>
          </router-link>
        </ul>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import Studycodemodel from '../../../mysql_interface/studycodemodel';


type P = {
  questions: Studycodemodel.Iquestion[],
  questionbankid?: string | number
  routername: string
  userquestion: Studycodemodel.Iuserquestion[]
}

const p = defineProps<P>()


const list = computed(() => {
  return p.questions.map(f => {
    const userquestion = p.userquestion.find(z => z.questionid === f.ID)
    return {
      ...f,
      userquestion
    }
  })
})

</script>

<style scoped>
.list-group-item {
  border: none;
  cursor: pointer;
  color: #32325d;
}

.questionlist {
  height: calc(100vh - 65px);
  padding-top: 65px;
}

.text-dark:hover {
  text-decoration: none;
}

.list-group-item:hover {
  background-color: var(--color-cheng);
  color: #fff;
}

.footer {
  padding-top: 5px;
}

.active1 {
  background-color: var(--color-cheng);
  color: #fff;
}

.badge-pill {
  color: var(--color-cheng);
  border-color: var(--color-cheng);
}

.badge {
  border-radius: 3px;
  font-weight: 400;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
</style>